<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>姓名案例_计算属性实现</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!--
        计算属性：
            1. 定义：要用的属性不存在，要通过已有的属性计算的来。
            2. 原理：底层借助了Object.defineproperty 方法提供的getter和setter。
            3. get函数什么时候执行？
                1. 初次读取时会执行一次
                2. 当依赖的数据发生改变的时候，会再次被调用
            4. 优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便
            5. 备注：
                1. 计算属性最终会出现在vm上，直接读取使用即可
                2. 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变
    -->
    <div id="root">
        姓: <input type="text" v-model="firstName"><br/>
        名: <input type="text" v-model="lastName"><br/>
        全名: <span>{{fullName()}}</span>
    </div>
</body>
<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        data: {
            firstName: '张',
            lastName: '三'
        },
        computed: {
            fullName: {
                // get有什么用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
                // get什么时候会被调用？1. 初次调用fullName时。2. 所依赖的数据发生变化的时候会调用
                // 计算属性是有，缓存的，调用一次以后，没有发生变化，就不会再次调用。普通属性是每使用一次就会调用一次
                get() {
                    console.log('get被调用了')
                    return this.firstName + '-' + this.lastName
                },
                // 用于修改计算属性，计算属性是有缓存的，如果想要真正的修改计算属性，就需要去修改计算属性，计算的那个地方进行修改。否则清理不掉缓存
                // set什么时候调用，当fullName被改变的时候调用
                set(value) {
                    console.log('set',value)
                    const arr = value.split('-')
                    this.firstName = arr[0]
                    this.lastName = arr[1]
                }
            }
        }
    })
</script>
</html>